<template>
  <div class="afterSalesApplication box-border min-h-screen px-32rpx">
    <div class="relative z-999 flex items-center pb-40rpx"
         :style="{ paddingTop: `${searchBarTop}px` }"
         @click.stop="goback">
      <uni-icons type="back" size="28" />
      <div class="absolute left-0 top-0 w-100% text-center text-36rpx font-600"
           :style="{ top: `${searchBarTop}px` }"
      >售后申请</div>
    </div>
    <div class="boxShdow my-32rpx box-border rounded-24rpx p-32rpx">
      <div class="mb-32rpx flex items-center justify-between">
        <div class="w-150rpx text-28rpx text-hex-333333">退款原因</div>
        <div class="relative w-50% flex items-center justify-end" @click="openPop">
          <div class="text-24rpx text-hex-CBCBCB">{{ selectReason }}</div>
          <image
            :src="`${cdnUrl}/imgs/shop/moreicon.png${imgVersion}`"
            mode="scaleToFill"
            class="h-42rpx w-42rpx"
          />
        </div>
      </div>
    </div>
    <div class="boxShdow my-32rpx box-border flex items-center justify-between rounded-24rpx p-32rpx">
      <div class="w-60%">
        <div class="mb-16rpx text-28rpx text-hex-333333">退款金额</div>
        <div class="flex items-center">
          <text class="text-60rpx font-bold text-hex-333333">¥ </text>
          <input v-model="refundAmount" :focus="isInput" type="text" class="w-100% text-56rpx font-bold text-hex-333333">
        </div>
      </div>
      <!-- <div
        class="flex flex-col items-center justify-center"
        @click="upDatePrice">
        <image
          :src="`${cdnUrl}/svgicons/tea/edit.svg${imgVersion}`"
          mode="scaleToFill"
          class="mb-10rpx h-40rpx w-40rpx"
        />
        <div class="text-24rpx text-hex-7C8699">修改金额</div>
      </div> -->
    </div>
    <div class="boxShdow my-32rpx box-border rounded-24rpx p-32rpx">
      <div class="mb-32rpx text-26rpx text-hex-333333">上传凭证<text class="text-hex-7C8699">(最多4张)</text></div>
      <div class="flex">
        <div v-for="(item, index) in fileLists"
             class="relative mb-25rpx mr-25rpx h-136rpx w-136rpx flex flex-col rounded-20rpx">
          <image
            class="h-136rpx w-136rpx rounded-20rpx bg-hex-F5F5F5"
            :src="item"
            mode="scaleToFill"
          />
          <div
            class="absolute h-40rpx w-40rpx flex items-center justify-center border rounded-50% bg-[rgba(0,0,0,0.7)] -bottom-18rpx -right-18rpx"
            @click.stop="deleteImg(index)">
            <image
              class="h-40rpx w-40rpx"
              :src="`${cdnUrl}/imgs/mine/close.png${imgVersion}`"
              mode="scaleToFill"
            />
          </div>
        </div>
        <div v-if="fileLists.length < 4"
             class="mb-20rpx h-136rpx w-136rpx flex flex-col items-center justify-center rounded-20rpx bg-hex-F5F5F5"
             @click.stop="select">
          <uni-icons type="plusempty" size="30" color="#D9D9D9" />
        </div>
      </div>
    </div>
    <div class="btn-theme-bg fixed bottom-64rpx left-32rpx right-32rpx h-72rpx rounded-148rpx text-center leading-72rpx text-hex-ffffff"
         @click.stop="applyForService">提交</div>

    <uni-popup ref="specspop" type="bottom" background-color="#fff" class="z-999">
      <div class="rounded-t-64rpx bg-hex-fff px-66rpx pb-60rpx">
        <div class="relative border-2rpx border-hex-f5f5f5 border-transparent border-solid py-32rpx text-center text-34rpx font-600">
          退款原因</div>
        <!-- <div v-for="item in reasonList" class="flex justify-between py-20rpx" @click.stop="changeReason(item)">
          <div>{{ item.title }}</div> -->
        <radio-group @change="radioChange">
          <label v-for="(item, index) in reasonList" :key="item.value" class="flex justify-between py-20rpx">
            <div class="text-30rpx">{{ item.title }}</div>
            <div>
              <radio :value="item.value" :checked="index === curIndex" color="#ABCD03" style="transform:scale(.8)" />
            </div>
          </label>
        </radio-group>
        <!-- </div> -->
        <div class="mt-48rpx flex items-center justify-center">
          <div class="btn-theme-bg h-92rpx w-100% rounded-46rpx text-center leading-92rpx text-hex-fff"
               @click="closePop">确认</div>
        </div>
      </div>
    </uni-popup>
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/stores/user'

let searchBarTop: any = $ref('24')
let businessId = $ref('')
let refundAmount: any = $ref(0)
onLoad((options: any) => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
  if (options.businessId) {
    businessId = options.businessId
  }
  if (options.refundAmount) {
    refundAmount = Number(options.refundAmount).toFixed(2)
  }
})
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}


const { user } = useUserStore()
let price: any = $ref('429.00')
let isInput: any = $ref(false)
const upDatePrice = () => {
  isInput = true
}
let selectList: any = $ref([
  { value: 0, text: '篮球' },
  { value: 1, text: '足球' },
  { value: 2, text: '游泳' },
])
let selectStatusList: any = $ref([
  { value: 0, text: '未发货' },
  { value: 1, text: '发货中' },
  { value: 2, text: '已收货' },
])
let refundType: any = $ref('')
const getDataType = (data) => {
  refundType = data
}

const specspop: any = $ref(null)
let selectReason = $ref('请选择')
let curIndex = $ref(6)
const reasonList = $ref([
  { title: '不想要了', value: '0' },
  { title: '拍错了/拍多了', value: '1' },
  { title: '描述与质量不符', value: '2' },
  { title: '协商一致', value: '3' },
  { title: '未发货', value: '4' },
  { title: '缺货', value: '5' },
])

const radioChange = (evt) => {
  for (let i = 0; i < reasonList.length; i++) {
    if (reasonList[i].value === evt.detail.value) {
      curIndex = i
      selectReason = reasonList[i].title
      break
    }
  }
}

// 上传图片
let fileLists: any = $ref([])
const select = async () => {
  await chooseImage({
    count: 4, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], //从相册或者拍照选择
    async success(res: any) {
      for (let i = 0; i < res.tempFiles.length; i++) {
        const fileUrl = await uploadCosFile(res.tempFiles[i], res.tempFiles[i].path)
        fileLists.push(fileUrl)
      }
    },
  })
  console.log(fileLists, 'fileLists')
}
const deleteImg = (index) => {
  fileLists.splice(index, 1)
}
const openPop = () => {
  specspop.open('bottom')
}
const closePop = () => {
  specspop.close()
}

const applyForService = async () => {
  if (fileLists.length === 0) {
    uni.showToast({ title: '上传凭证不能为空', icon: 'error' })
    return
  }
  if (!selectReason) {
    uni.showToast({ title: '请选择原因', icon: 'error' })
    return
  }
  const reqData = {
    method: 'post',
    headers: { UserId: user.id, AppType: 3 },
    data: {
      'afterSaleImage': fileLists.join(','),
      'businessId': businessId,
      'reason': selectReason,
    },
  }
  uni.showLoading({ title: 'Loading...' })
  const { data, status } = await Fetch('/qqyapi/order/afterSale/apply', reqData)
  if (status === 200 && data.code === 0) {
    uni.hideLoading()
    uni.showToast({
      title: '申请成功',
      icon: 'success',
      mask: true,
    })
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages-mine/order?appType=3',
      })
    }, 1500)
  } else {
    uni.hideLoading()
  }

}
onMounted(() => {

})
</script>

<style lang="scss" scoped>
.afterSalesApplication{
  .boxShdow{
    box-shadow: 0rpx 8rpx 40rpx 0rpx rgb(0 0 0 / 6%);
  }
}
</style>
